<template>
	<view class="box">
		<top-blank></top-blank>
		<top-common @backPage="backPage" titleContent="请填写保养信息"></top-common>
		<view class="choosePosition">
			<!-- 未选择时显示 -->
			<view class="choosePositionBox" @click="goto()" v-if="Addr == ''">
				<image class="imageStyle" src="../../static/image/repair-position/position.png"></image>
				<view class="tip">请选择报修地点</view>
				<image class="imageStyle imageStyle-right" src="../../static/image/repair-position/enter-arrow.png">
				</image>
			</view>

			<!-- 已选择时显示 -->
			<view class="choosePositionBox" @click="goto()" v-else>
				<view class="content">
					<view class="firstLine">
						<image class="imageStyle" src="../../static/image/repair-position/position.png"></image>
						<view class="mainTitle title">{{ name }}</view>
					</view>
					<view class="subTitle title">{{ address }}</view>
				</view>
				<image class="imageStyle imageStyle-right" src="../../static/image/repair-position/enter-arrow.png">
				</image>
			</view>
		</view>

		<view class="chooseServer">
			<my-picker @picker="PickerType" :array="Myarray1" title="保养类型"></my-picker>
			<my-picker @picker="PickerAccessories" :array="Myarray2" title="选择设备"></my-picker>
		</view>

		<view class="bottomBtn">
			<bottom-submit @submitMes="submitMes" title="立即保养" class="bottom-submit-style"></bottom-submit>
		</view>
	</view>
</template>

<script>
	import {
		submitRepairInformation,
		getAllFaultTypes,
		getAllMachineModels
	} from '@/api/repairInformationSubmitApi.js'

	import config from "@/config"; // 导入配置文件


	// 基本路径
	const baseURL = config.baseURL;

	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				address: '',
				name: '',
				Addr: '',
				Myarray1: [],
				Myarray2: [],
				machineModelNumber: "",
				faultType: "",
			};
		},
		methods: {
			backPage() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goto() {
				uni.redirectTo({
					url: '/components/choosePosition/choosePosition'
				});
			},
			async onLoadFaultType() {
				try {
					this.Myarray1 = await getAllFaultTypes();
					this.faultType = this.Myarray1[0];
				} catch (err) {
					console.error("服务器罢工了", err);
					uni.showToast({
						title: "服务器罢工了",
						image: '/static/image/icon/Disconnected.png',
						duration: 2000
					})
				}
			},
			async onLoadMachine() {
				try {
					this.Myarray2 = await getAllMachineModels();
					this.machineModelNumber = this.Myarray2[0];
				} catch (err) {
					console.error("服务器罢工了", err);
					uni.showToast({
						title: "服务器罢工了",
						image: '/static/image/icon/Disconnected.png',
						duration: 2000
					})
				}
			},
			submitMes() {
				const userData = uni.getStorageSync('userData');
				console.log("user登录记录", userData); // 输出: user登录记录

				if (userData == "") {
					// 不存在名为 'userData' 的数据

					uni.showToast({
						duration: 2000,
						title: "您还未登录，即将跳转登录！",
						icon: 'none',
						mask: "true"
					})

					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}, 2000); // 1000毫秒等于1秒钟



					return;
				}

				let districtId = this.$store.getters.getDistrictId

				if (districtId == -100) {
					uni.showToast({
						duration: 2000,
						title: "请选择报修地点",
						icon: 'none',
						image: "../../static/tip.png"
					})
					return;
				}

				let userId = userData.user.id;


				let data = {
					"userId": userId,
					"machineModelNumber": this.machineModelNumber,
					"faultTypeName": this.faultType,
					"address": {
						"districtId": districtId
					},
					"typeEnum": "MAINTAIN"
				};

				console.log("打印要传递的数据：", data);

				submitRepairInformation(data);
			},
			PickerType(name) {
				console.log("打印选项名", name);
				this.faultType = name;
			},
			PickerAccessories(name) {
				console.log("打印选项名", name);
				this.machineModelNumber = name;
			}
		},
		onLoad() {
			this.Addr = this.$store.state.selectAddr;
			this.name = this.Addr.name;
			this.address = this.Addr.addressMin;

			this.onLoadFaultType();
			this.onLoadMachine();
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #333333;
	}


	.box {
		.choosePositionBox {
			display: flex;
			width: 96vw;
			height: 140rpx;
			margin: 30rpx auto;
			align-items: center;
			border-radius: 30rpx;
			border-left: 4rpx solid #ffb612;
			border-right: 4rpx solid #ffb612;
			background-color: #4f4f4f;
			box-sizing: border-box;

			.tip {
				color: #ffb612;
			}

			// 图标icon统一样式
			.imageStyle {
				width: 70rpx;
				height: 70rpx;
			}

			.imageStyle-right {
				position: absolute;
				right: 30rpx;
			}

			// 标题省略
			.title {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				color: white;
			}

			.mainTitle {
				font-size: 45rpx;
			}

			.subTitle {
				font-size: 30rpx;
				margin-left: 9vw;
			}

			.firstLine {
				height: 60rpx;
				display: flex;
			}

			.content {
				width: 75vw;
			}
		}

		.chooseServer {
			color: #ffb612; //字体颜色
			background-color: #4f4f4f;
			width: 95vw;
			display: flex;
			flex-direction: column;
			margin: 0 auto;
			border-radius: 30rpx;
			padding-bottom: 60rpx;
			border-left: 4rpx solid #ffb612;
			border-right: 4rpx solid #ffb612;
		}

		.describe {
			width: 95vw;
			height: 35vh;
			margin: 20rpx auto 0;
			border-radius: 30rpx;
			border-left: 4rpx solid #ffb612;
			border-right: 4rpx solid #ffb612;
			background-color: #4e4e4e;

			.describeTitle {
				font-weight: 600;
				color: #ffb612;
				margin-left: 50rpx;
				font-size: 40rpx;
			}

			textarea {
				height: 25vh;
				width: 80vw;
				border: 1rpx solid #bbbbbb;
				margin: 20rpx auto;
				padding: 10rpx;
				color: white;
			}
		}

		.bottomBtn {
			width: 100vw;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
</style>
